<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{ 
            text-align: center;
        }

        .rank-list{ 
            width: 800px;
            height: 480px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        table{
            width: 100%;
            border-collapse: collapse;
        }

        .rank-col{
            width: 60px;
        }

        .status-col{ 
            width: 80px;
        }

        .song-col{ 
        }

        .singer-col{ 
            width: 100px;
        }

        .duration-col{ 
            width: 80px;
        }

        table tr th,
        table tr td{ 
            text-align: center;
            height: 80px;
            border: 0px;
            padding: 0px;
            text-align: left;
        }

        table tr:nth-of-type(odd){ 
            background-color: #F7F7F7;
        }

        table tr:nth-of-type(1){
            background-color: #31C272;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
        }

        table tr td:nth-of-type(1) span.rank{
            color: #9195a3;
            font-size: 20px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        table tr td:nth-of-type(1) span.no1{
            color: #F00;
        }
        table tr td:nth-of-type(1) span.no2{
            color: #f60;
        }
        table tr td:nth-of-type(1) span.no3{
            color: #faa90e;
        }

        table tr td:nth-child(2) img{
            display: block;
            margin-left: 10px;
        }

        table tr td:nth-child(2) span{
            color: #999;
            font-size: 16px;
        }

        table tr td:nth-child(4),
        table tr td:nth-child(5){
            color: #999;
        }

        .song-info{
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 0;
            position: relative;
        }

        .song-info img{
            width: 60px;
            height: 60px;
            margin: 10px 10px 10px 0;
            vertical-align: middle;
        }

        .song-info span{
            display: inline-block;
            font-size: 14px;
            vertical-align: middle;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .song-info span.song-name{
            color: #000;
        }

        .song-info span.song-desc{
            color: #999;
            /* width: 100px; */
        }

        table tr:hover td .song-info span.song-name{
            color: #31C272;
        }

        table tr:hover td .song-info span.song-desc{
            width: 120px;
        }

        .song-info .btns{ 
            width: 150px;
            height: 60px;
            vertical-align: middle;
            float: right;
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            display: none;
        }

        .song-info .btns a{ 
            display: inline-block;
            width: 40px;
            height: 40px;
            background-size: cover;
            margin: 10px 5px;
        }

        .song-info .btns a.play{ 
            background-image: url('/src/img/qq-music/play.png');
        }

        .song-info .btns a.add{ 
            background-image: url('/src/img/qq-music/add.png');
        }

        .song-info .btns a.download{ 
            background-image: url('/src/img/qq-music/download.png');
        }

        table tr:hover td .btns{
            display: block;
        }
    </style>
</head>
<body>
    <h1>QQ音乐排行榜</h1>
    <div class="rank-list">
        <table>
            <colgroup>
                <col span="1" class="rank-col">
                <col span="1" class="status-col">
                <col span="1" class="song-col">
                <col span="1" class="singer-col">
                <col span="1" class="duration-col">
            </colgroup>
            <tr>
                <th></th>
                <th>排行</th>
                <th>歌曲</th>
                <th>歌手</th>
                <th>时长</th>
            </tr>
    
            <tr>
                <td>
                    <span class="rank no1">1</span>
                </td>
                <td>
                    <img src="/src/img/qq-music/up-jiantou.png" alt="">
                    <span>158%</span>
                </td>
                <td>
                    <div class="song-info">
                        <img src="/src/img/qq-music/music-img1.webp" alt=""></img>
                        <span class="song-name">爱丫爱丫</span>
                        <span class="song-desc">《爱情是从告白开始的》电视剧插曲</span>
                        <div class="btns">
                            <a href="#" class="play"></a>
                            <a href="#" class="add"></a>
                            <a href="#" class="download"></a>
                        </div>
                    </div>
                </td>
                <td>BY2</td>
                <td>03:51</td>
            </tr>
    
            <tr>
                <td>
                    <span class="rank no2">2</span>
                </td>
                <td>
                    <img src="/src/img/qq-music/up-jiantou.png" alt="">
                    <span>158%</span>
                </td>
                <td>
                    <div class="song-info">
                        <img src="/src/img/qq-music/music-img2.webp" alt=""></img>
                        <span class="song-name">春泥(女版)</span>
                        <span class="song-desc">《爱情是从告白开始的》电视剧插曲</span>
                        <div class="btns">
                            <a href="#" class="play"></a>
                            <a href="#" class="add"></a>
                            <a href="#" class="download"></a>
                        </div>
                    </div>
                </td>
                <td>BY2</td>
                <td>03:51</td>
            </tr>
    
            <tr>
                <td>
                    <span class="rank no3">3</span>
                </td>
                <td>
                    <img src="/src/img/qq-music/up-jiantou.png" alt="">
                    <span>158%</span>
                </td>
                <td>
                    <div class="song-info">
                        <img src="/src/img/qq-music/music-img3.webp" alt=""></img>
                        <span class="song-name">孤勇者(Live)</span>
                        <span class="song-desc">《英雄联盟:双城》电视剧插曲</span>
                        <div class="btns">
                            <a href="#" class="play"></a>
                            <a href="#" class="add"></a>
                            <a href="#" class="download"></a>
                        </div>
                    </div>
                </td>
                <td>BY2</td>
                <td>03:51</td>
            </tr>
    
            <tr>
                <td>
                    <span class="rank">4</span>
                </td>
                <td>
                    <img src="/src/img/qq-music/up-jiantou.png" alt="">
                    <span>158%</span>
                </td>
                <td>
                    <div class="song-info">
                        <img src="/src/img/qq-music/music-img2.webp" alt=""></img>
                        <span class="song-name">最幸运的幸运(Live)</span>
                        <span class="song-desc">《余生，请多指教》电视剧片尾曲</span>
                        <div class="btns">
                            <a href="#" class="play"></a>
                            <a href="#" class="add"></a>
                            <a href="#" class="download"></a>
                        </div>
                    </div>
                </td>
                <td>BY2</td>
                <td>03:51</td>
            </tr>
    
            <tr>
                <td>
                    <span class="rank">5</span>
                </td>
                <td>
                    <img src="/src/img/qq-music/up-jiantou.png" alt="">
                    <span>158%</span>
                </td>
                <td>
                    <div class="song-info">
                        <img src="/src/img/qq-music/music-img2.webp" alt=""></img>
                        <span class="song-name">鲛人之歌(Live)</span>
                        <span class="song-desc">《与君初相识》电视剧片尾曲</span>
                        <div class="btns">
                            <a href="#" class="play"></a>
                            <a href="#" class="add"></a>
                            <a href="#" class="download"></a>
                        </div>
                    </div>
                </td>
                <td>BY2</td>
                <td>03:51</td>
            </tr>
        </table>
    </div>

    
</body>
</html>